<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>选择群聊</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
		.pushSOP_main_contaienr{
			width: 485px;
			margin: 0 auto;
			padding: 32px 0 32px 0;
			background: #fff;
		}
		.pushSOP_title{
			font-size: 17px;
			width: 100%;
			text-align: center;
			margin-top: 2px;
			font-weight: 600;
			line-height: 24px;
			letter-spacing: 1px;
			padding-left: 20px;
		}
		.pushSOP_button_content{
			display: flex;
			justify-content: flex-end;
			flex: 1;
			align-items: center;
		}

		.selectGroupSOP_search_container{
			display: flex;
			align-items: center;
			position: relative;
			padding: 4px 11px;
			color: rgba(0,0,0,.65);
			font-size: 14px;
			background-color: #fff;
			background-image: none;
			border: 1px solid #d9d9d9;
			border-radius: 4px;
			-webkit-transition: all .3s;
			transition: all .3s;
			margin-top: 16px;
		}
		.selectGroupSOP_search_container input{
			flex: 1;
			padding-right: 30px;
			outline: none;
			border: none;
			height: 22px;
			font-size: 14px;
		}
		.selectGroupSOP_search_container svg{
			fill: #8a8a8a;
			position: absolute;
			right: 12px;
			top: 8px;
			cursor: pointer;
		}
		.selectGroupSOP_other_container{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 13px;
			color: #666;
			margin-top: 8px;
			margin-bottom: 6px;
		}
		.selectGroupSOP_otherRight_container{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.selectGroupSOP_otherRight_container span{
			padding-left: 3px;
		}
		.selectGroupSOP_list_content{
			display: flex;
			align-items: center;
			border-bottom: 1px dashed #e9e9e9;
			padding: 17px 0;
			transition: all .36s;
			-webkit-transition: all .36s;
			border-radius: 4px;
		}
		.selectGroupSOP_listHover_content:hover{
			background: #f5fdff;	
		}
		.selectGroupSOP_list_content img{
			width: 40px;
			height: 40px;
			border-radius: 3px;
			margin-right: 11px;
		}
		.selectGroupSOP_listInfo_container{
			flex: 1;
			display: flex;
			flex-direction: column;
			height: 40px;
			justify-content: space-between;
		}
		.selectGroupSOP_listInfo_container h4{
			color: #222;
			font-size: 14px;
			font-weight: 500;
		}
		.selectGroupSOP_listInfo_container p{
			font-size: 12px;
			color: #999;
			opacity: .85;
		}
		.selectGroupSOP_listRight_container input{
			display: block;
		}
		.selectGroupSOP_listRight_container p{
			font-size: 13px;
			    color: #666;
			    opacity: .85;
		}
		.selectGroupSOP_list_container h3{
			text-align: center;
			color: #909090;
			font-size: 12px;
			padding: 10px 0;
		}
	</style>
</head>
<body>
	<form class="" action="">
		<div class="pushSOP_main_contaienr">
			<h2 class="pushSOP_title">选择群聊</h2>
			<div class="selectGroupSOP_search_container">
				<input type="text" id="names" placeholder="请输入群名称">
				<svg t="1607504198039" class="icon" onclick="icon()" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3206" width="16" height="16"><path d="M941.6 874L763.7 696.1c20.6-26.7 37.6-55.9 50.8-87.2 20.3-48.3 30.6-99.6 30.6-152.4s-10.3-104.1-30.6-152.4c-19.6-46.6-47.7-88.5-83.5-124.5s-77.5-64.2-123.9-84C559 75.3 507.9 64.9 455.3 64.9S351.6 75.3 303.5 95.8c-46.4 19.7-88.1 48-123.9 84-35.8 36-63.9 77.8-83.5 124.5-20.3 48.3-30.6 99.6-30.6 152.4s10.3 104.1 30.6 152.4c19.6 46.6 47.7 88.5 83.5 124.5s77.5 64.2 123.9 84c48.1 20.5 99.2 30.8 151.8 30.8S559 838 607.1 817.6c31.7-13.5 61.2-30.9 88.1-52l177.6 177.6c18.9 18.9 49.9 18.9 68.9 0 18.9-19.3 18.9-50.3-0.1-69.2zM455.3 768.3c-170.9 0-310-139.8-310-311.7s139-311.7 310-311.7c170.9 0 310 139.8 310 311.7s-139.1 311.7-310 311.7z" p-id="3207"></path></svg>
			</div>
			<div class="selectGroupSOP_other_container">
				<div class="selectGroupSOP_otherLeft_container">
					全部群聊（{$count}）：
				</div>
				<div class="selectGroupSOP_otherRight_container">
					<input type="checkbox" name="groups">
					<span>全选</span>
				</div>
			</div>
			<div class="selectGroupSOP_list_container">
				{loop $grat as $group}
				<div class="selectGroupSOP_list_content selectGroupSOP_listHover_content">
					<img src="{$group->user->avatar}">
					<div class="selectGroupSOP_listInfo_container">
						<h4>{$group->name?$group->name:'默认群'}</h4>
						<p>群主：{$group->user->name}</p>
					</div>
					<div class="selectGroupSOP_listRight_container">
						<input type="checkbox" name="groups" value="{$group->id}">
					</div>
				</div>
				{/loop}
				<h3>没有更多了</h3>
			</div>

			<div class="layui-form-item">
				<div class="pushSOP_button_content">
					<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">取消</button>
					<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="check('')">删除</button>
				</div>
			</div>
		</div>	
	</form>
	<script src="/layui/layui.js"></script>
	<script src="/js/ajax.js"></script>
	<script>

	//表单
	layui.use('form', function(){
		var form = layui.form;

	  //监听提交
	  form.on('submit(formDemo)', function(data){
	  	layer.msg(JSON.stringify(data.field));
	  	return false;
	  });

	});
</script>
<script src="/cdn/jquery.js"></script>
<script type="text/javascript">
	$('.selectGroupSOP_otherRight_container input').change(function(e) {
		console.log($(this).is(':checked'));
		if($(this).is(':checked') == true){
			$("input[name='groups']").prop('checked', true);
		}else{
			$("input[name='groups']").prop('checked', false);
		}
	});
	function check(id){
		var checkboxs = document.getElementsByName("groups");
        var check_val = [];
        for(k in checkboxs){
            if(checkboxs[k].checked){
                check_val.push(checkboxs[k].value);
            }
        }
        myAjaxPost(false, true, '', { check_val:check_val}, function (resp) {
			if(resp.status == 'success'){
				layer.msg(resp.msg);
				 setTimeout(function(){
					parent.layer.closeAll('iframe');
					parent.location.reload(); 
				},2000);
			}
		})
	}

	function icon(){
		var name = $("#names").val();
		name= $.trim(name); 
		if(name== ''){
			alert("请输入要搜索的群名称");
			return false;
		}
		myAjaxPost(false, true, '', { name:name}, function (resp) {
			if(resp.status == 'success'){
				var str = '';
				data = resp.data;
				data.forEach(function(datas) {
					if(datas.name){
						var name = datas.name;
					}else{
						var name = '默认群';
					}
					str += '<div class="selectGroupSOP_list_content selectGroupSOP_listHover_content">';
					str += '<img src="'+datas.user.avatar+'">';
					str += '<div class="selectGroupSOP_listInfo_container">';
					str += '<h4>'+name+'</h4>';
					str += '<p>群主：'+datas.user.name+'</p>';
					str += '</div>';
					str += '<div class="selectGroupSOP_listRight_container">';
					str += '<input type="checkbox" name="groups" value="{$group->id}">';
					str += '</div>';
					str += '</div>';
				})
				$(".selectGroupSOP_list_container").html(str);
			}
		})
	}
</script>
</body>
</html>